<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        //初始化代码
        $(function () {
            var vm = new Vue({
                el:"#vm",
                data:{
                    name:"chenjw",
                    age:18
                }
            })
            window.vm = vm;

            var vm1 = new Vue({
                el:"#vm1",
                data:{
                    name:'',
                    email:''
                }
            })
            window.vm1 = vm1;

            var vm2 = new Vue({
                el:"#vm2",
                data:{
                    language:['zh','en']
                }
            })
            window.vm2 = vm2;

            var vm3 = new Vue({
                el:"#vm3",
                data:{
                    subscribe:true
                }
            })
            window.vm3 = vm3;

            var vm4 = new Vue({
                el:"#vm4",
                data:{
                    city:"bj"
                }
            })
            window.vm4 = vm4;

            var vm5 = new Vue({
                el:"#vm5",
                data:{
                    name:'',
                    check:false
                },
                methods:{
                    login:function () {
                        //显示json格式的内容
                        alert(JSON.stringify(this.$data))
                    }
                }
            })
            window.vm5 = vm5;
        })
    </script>
</head>
<body>
    <div id="vm">
        <h1>单向绑定</h1>
        <p>您好,{{name}}！</p>

        <p>你的年龄是：{{age}}！</p>
        <p>Hello,<span v-text="name"></span>!</p>
    </div>
    <div id="vm1">
        <h1>双向绑定:与input type='text'绑定</h1>
        <p>姓名：<input v-model="name"></p>
        <p>邮箱：<input v-model="email"></p>
    </div>
    <div id="vm2">
        <h1>与type=checkbox绑定</h1>
        <label><input type="checkbox" v-model="language" value="zh">Chinese</label>
        <label><input type="checkbox" v-model="language" value="en">English</label>
        <label><input type="checkbox" v-model="language" value="fr">French</label>
    </div>
    <div id="vm3">
        <h1>与type=checkbox Boolean绑定</h1>
        <label><input type="checkbox" v-model="subscribe" >Chinese</label>
    </div>
    <div id="vm4">
        <h1>与select绑定</h1>
        <select v-model="city">
            <option value="bj">BenJin</option>
            <option value="sh">ShangHai</option>
            <option value="gz">GuanZhou</option>
        </select>
    </div>
    <div id="vm5">
        <h1>表单处理</h1>
        <form v-on:submit.prevent="login">
            姓名:<input v-model="name">
            <label>是不是GAI:</label><input type="checkbox" v-model="check">
            <button type="submit">登录</button>
        </form>
    </div>
</body>
</html>